<template>
	<view class="page">
		<view class='head'>
			<view v-for="(item,index1) in items" :key='index1' class="type" @tap="chooseHead(index1)" :class="headIndex == index1 ?'active':''" >{{item}}</view>
		</view>
		
		<!-- <view class="choose">
			<view @tap="choosetype(1)">全部<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 1 ?'active':''"></view></view>
			<view @tap="choosetype(2)">分组<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 2 ?'active':''"></view></view>
			<view @tap="choosetype(3)">类型<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 3 ?'active':''"></view></view>
			<view @tap="choosetype(4)">筛选<text style="font-size: 20rpx;color: #999999;">▼</text><view :class="active == 4 ?'active':''"></view></view>
		</view> -->

		<view class="list">
			<view v-for="(item,index1) in list" :key='index1'  class=""  style="width: 100%;" v-if="headIndex != 4">
				<view class="product-box">
					<view class="product-info">
						<view style="display: flex;">
							<view class="img" >
								<image src="../../static/my/computer.png" mode="widthFix"></image>
							</view>
							<view class="info-box" @tap="toJiankong(item.id,item.status,item.type,item.rong)">
					
								<view class="title">
									<view  style="width: 80%;"  >
										{{item.rong.substring(0,7)}}
									</view>
								</view>
								
								<view class="content" >
									<view class="content-one">
										<view class="" style="color: #aeaeae;">
											<view style="margin-top: 10rpx;">{{brandName}} {{item.address}}</view>
											<view style="display: flex;margin-top: 10rpx;">
												<view class="line-status">
													<view v-if="item.status ==1" class="line-green"></view>
													<view v-else-if="item.status == 2" class="line-glay"></view>
													<view v-else-if="item.status == 0" class="line-red"></view>
												</view>
												<view>{{item.NG}}  {{item.title.substring(item.title.length-12)}}</view>
											</view>
										</view>
									</view>
								</view>
							</view>
							<view class="marny-box1" @tap="toLog(item.id,item.status)">
								<view class="content-two" >
									+{{item.profit}}
								</view>
								<view class="number">
									总{{item.total}}
								</view>
								<view style="font-size: 25rpx;color: #008cbd;">
									查看详情
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view  v-if="headIndex == 4" class="group">
				<view class="one"  v-for="(item1,index2) in groupList" :key='index2'  >
					
					<view class="title">
						<view style="font-weight: bold;">{{item1.group_name}}</view>
						<view :class="dalArray.indexOf(item1.group_id) >= 0 ? 'active' : 'cri'"  v-if="cri" @tap="delArr(item1.group_id)"></view>
						<view @tap='updateGroup(item1.group_id,item1.group_name)' v-if="!cri" style="color: #ff5528; font-size: 26rpx;">修改</view>
					</view>
					<view class="content1">
						<view>设备量:{{item1.sum_equ}}个</view>
						<view>昨日收益:{{item1.sum_porfits}}元</view>
					</view>
					<view class="content2">
						<view>总收益: <text style="color: #008cbc;">{{item1.total_profit}}</text>元</view>
						<view>昨日平均:{{item1.v_porfits}}元</view>
					</view>
					<view class="marny-box">
						<view class="marny-box-one">
							<view style="font-size: 22rpx;margin: 10rpx 0;">在线设备</view>
							<view style="color: #1FD188">{{item1.online}}</view>
						</view>
						<view class="marny-box-one">
							<view style="font-size: 22rpx;margin: 10rpx 0;">离线设备</view>
							<view style="color: #ff0000">{{item1.downline}}</view>
						</view>
						<view class="marny-box-one">
							<view style="font-size: 22rpx;margin: 10rpx 0;">异常设备</view>
							<view style="color: #ff0000">{{item1.yichang}}</view>
						</view>
					</view>
				</view>
				<view>
					<view></view>
					<view>全选</view>
				</view>
				<view class="add-group" @tap="addGroup" v-if="submitBtn">添加分组</view>
				<view class="del-group" @tap="delGroup" v-if="delBtn">删除分组</view>
				<view class="del-btn"  @tap="comDel" v-if="!delBtn">删除分组</view>
				<view class="del-group" @tap="conealDel" v-if="!delBtn">取消</view>
			</view>
		</view>

		<view class="box" v-if="show"  @tap="coneal"></view>
		
		<view class="modal" v-if="show">
			<view class="title">
				备注修改
			</view>
			<view class="content">
				<input type="text" v-model="newRemark">
			</view>
			<view class="btn-group">
				<view class="coneal" @tap="coneal">取消</view>
				<view class="submit" @tap="comfim">确认</view>
			</view>
		</view>
		
		<view class="boxGroup" v-if="showGroup"  @tap="conealGroup"></view>
		
		<view class="modal-group" v-if="showGroup">
			<view class="title">
				添加分组
			</view>
			<view class="content">
				<input class="name" type="text" v-model="groupName" placeholder="请输入分组名称">
			</view>
			<view class="btn-group">
				<view class="coneal-group" @tap="conealGroup">取消</view>
				<view class="submit-group" @tap="comfimGroup">确认</view>
			</view>
		</view>
		
		<view class="box" v-if="updateshow"  @tap="conealUpdate"></view>
		<view class="modal-update" v-if="updateshow">
			<view class="title">
				修改分组
			</view>
			<view class="content">
				<input class="name" type="text" v-model="updateName" placeholder="请输入分组名称">
			</view>
			<view class="btn-group">
				<view class="coneal-group" @tap="conealUpdate">取消</view>
				<view class="submit-group" @tap="comfimUpdate">确认</view>
			</view>
		</view>
		
		
		<view class="boxType" v-if="showType"  @tap="conealType"></view>
		
		<view class="modal-type" v-if="showType">
			<view class="choose-type"  v-if="active==4">
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					类型
				</view>
				<view class="content">
					<view :class="type==1? 'active': ''" @tap="queryType(1)">服务器</view>
					<view :class="type==2? 'active': ''" @tap="queryType(2)">工控机</view>
					<view :class="type==3? 'active': ''" @tap="queryType(3)">TV-Box</view>
				</view>
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					运营商
				</view>
				<view class="content">
					<view :class="isp=='电信'? 'active': ''" @tap="queryIsp('电信')">电信</view>
					<view :class="isp=='联通'? 'active': ''" @tap="queryIsp('联通')">联通</view>
					<view :class="isp=='移动'? 'active': ''" @tap="queryIsp('移动')">移动</view>
				</view>
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					省份
				</view>
				<view class="content">
					<view v-for="(item,index3) in pro" :key='index3' :class="province==item.province? 'active': ''" @tap="queryPro(item.province)" >{{item.province}}</view>
				</view>
				<view class="btn-group" style="margin-top: 40rpx;">
					<view class="coneal" @tap="conealType">取消</view>
					<view class="submit" @tap="comfimType">确认</view>
				</view>
			</view>
			<view class="choose-type"  v-if="active==3">
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					类型
				</view>
				<view class="content">
					<view :class="type==1? 'active': ''" @tap="queryType1(1)">服务器</view>
					<view :class="type==2? 'active': ''" @tap="queryType1(2)">工控机</view>
					<view :class="type==3? 'active': ''" @tap="queryType1(3)">TV-Box</view>
				</view>
			</view>
			<view class="choose-type"  v-if="active==2">
				<view class="title" style="font-weight: bold;margin: 20rpx 0;">
					分组
				</view>
				<view class="content1">
					<view 
					v-for="(item2,index4) in groupList" 
					:key='index4' 
					:class="groupId==item2.group_id? 'active': ''" 
					@tap="queryGroup(item2.group_id)" >
					{{item2.group_name}}
					</view>
				</view>
			</view>
			<view class="all" v-if="active==1">
				<view class="line"></view>
				<view :class="order == 1? 'active':'title'" @tap="chooseOrder(1)">昨日收益最高</view>
				<view class="line"></view>
				<view :class="order == 2? 'active':'title'" @tap="chooseOrder(2)">昨日收益最低</view>
				<view class="line"></view>
				<view :class="order == 3? 'active':'title'" @tap="chooseOrder(3)">总收益最高</view>
				<view class="line"></view>
				<view :class="order == 4? 'active':'title'" @tap="chooseOrder(4)">总收益最低</view>
				<view class="line"></view>
			</view>
			
		</view>
		
	</view>
</template>
<script>
	let App = getApp()
	
	export default {
	    data() {
	        return {
	            items: ['全部', '在线','离线', '异常'],
	            current: 0,
				list:[],
				status:4,
				newRemark:'',
				show:false,
				clickId:'',
				active:1,
				showType:false,
				showGroup:false,
				cri:false,
				submitBtn:true,
				delBtn:true,
				groupName:'',
				groupList:[],
				dalArray:[],
				order:0,
				pro:[],//省
				type:0,
				isp:0,
				province:'',
				groupId:0,
				updateshow:false,
				updateName:'',
				updateId:0,
				page:1,
				brandName:'',
				headIndex:0,
				usernum:''
				
	        };
	    },
	    onLoad(uid) {
			this.usernum = uid.uid
			this.getlist();	
		},
		onUnload() {
			this.newRemark = ''
			this.show = false
		},
		onShow(option) {
			this.status = uni.getStorageSync('equValue');
			this.headIndex = uni.getStorageSync('equIndex')*1;
			this.brandName = App.globalData.name
			this.getGroupList();
			this.showType = false;
		},
	    methods: {
			//新方法
			chooseHead(index){
				
				uni.pageScrollTo({
				    scrollTop: 0,
				    duration: 100,
				});
				
				this.headIndex = index
				this.page = 1
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				let object = {'user_id':this.usernum};
				object.order = this.order
				if(index == 1){
					object.status = 1
					this.status = 1
				}else if(index == 2){
					object.status = 2
					this.status = 2
				}else if(index == 3){
					object.status = 3
					this.status = 3
				}else if(index == 0){
					object.status = 4
					this.status = 4
				}else if(index == 4){
					uni.hideLoading()
					return;
				}
				
				this.$api.interfaceApi('equipmentList')(
					object
				).then(res=>{
					this.list = res.data
					uni.setStorageSync('equValue',this.status);
					uni.setStorageSync('equIndex',index);
					uni.hideLoading()
				})
				
			},
			
			
			onReachBottom() {
				this.page = this.page+1;
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('equipmentList')({
					'user_id':this.usernum,
					'status':this.status,
					'page':this.page,
					'order':this.order
				}).then(res=>{
					uni.hideLoading()
					
					if(res.data.length == 0){
						uni.showToast({
							icon:'error',
							title:'已经没有数据了哦'
						})
					}
					this.list = this.list.concat(res.data)
				})
			},
			
			
			
			//获取设备列表
			getlist(){
				//let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				this.$api.interfaceApi('equipmentList')({
					'user_id':this.usernum,
					'status':this.status,
					"page":this.page
				}).then(res=>{
					uni.hideLoading()
					if(res.data){
						this.list = res.data
						this.pro = res.data[0].pro
					}
					
				})
			},
			
	        onClickItem(val) {
	            this.current = val.currentIndex
	        },
			
			//跳转监控
			toJiankong(id,status,type,remarks){
				if(type == 1){
					uni.showToast({
						title:"该种类设备不支持查看",
						icon:'none'
					})
					return;
				}
				uni.navigateTo({
					url:`/pages/equipment/jiankong?id=${id}&remarks=${remarks}`
				})
			},
	
	        scollSwiper(e){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
	            this.current = e.target.current
				let object = {'user_id':this.usernum};
				
				if(e.target.current == 1){
					object.status = 1
					this.status = 1
				}else if(e.target.current == 2){
					object.status = 2
					this.status = 2
				}else if(e.target.current == 3){
					object.status = 3
					this.status = 3
				}else if(e.target.current == 0){
					object.status = 4
					this.status = 4
				}else if(e.target.current == 4){
					uni.hideLoading()
					return;
				}
				
				this.$api.interfaceApi('equipmentList')(object).then(res=>{
					this.list = res.data
					uni.setStorageSync('equValue',this.status);
					uni.setStorageSync('equIndex',e.target.current);
					uni.hideLoading()
				})
	        },
			
			getGroupList(){
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('getGroup')({
					uid:this.usernum
				}).then(res=>{
					this.groupList = res.data
				})
			},
			
			toLog(id,status){
				if(status == 0){
					uni.navigateTo({
						url:`/pages/equipment/scan?id=${id}`
					})
				}else{
					uni.navigateTo({
						url:`/pages/equipment/log?id=${id}`
					})
				}
			},
			
			updateRemark(id,remark){
				this.clickId = id;
				this.show = true
				this.newRemark = remark
			},
			
			comfim(){
				if(this.newRemark == ''){
					uni.showToast({
						title:"名称不能为空",
						icon:"none"
					})
					return
				}
				
				this.$api.interfaceApi('updateRemark')({
					'id':this.clickId,
					'remark':this.newRemark
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					if(res.code == 1){
						this.getlist();	
						this.newRemark = ''
						this.show = false
					}
				})
			},
			coneal(){
				this.newRemark = ''
				this.show = false
			},
			conealType(){
				this.showType = false
			},
			//查找
			comfimType(){
				let userinfo = uni.getStorageSync('userinfo');
				uni.showLoading({
					title:"加载中"
				})
				let Object = {
					'user_id':this.usernum,
					'status':this.status
				}
				
				if(this.active == 1){
					Object.order = this.order
				}else if(this.active == 4){
					
					Object.type = this.type
					Object.isp = this.isp
					Object.province = this.province
				}else if(this.active == 3){
					Object.type = this.type
				}else if(this.active == 2){
					Object.gid=this.groupId
				}
				
				this.$api.interfaceApi('equipmentList')(Object).then(res=>{
					this.list = res.data
					this.showType = false
					uni.hideLoading()
				})
			},
			choosetype(index){
				this.type = 0
				this.showType = true
				this.province = ''
				this.isp = ''
				this.active = index
			},
			conealGroup(){
				this.showGroup = false
			},
			comfimGroup(){
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('addGroup')({
					'uid':this.usernum,
					'name':this.groupName
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					if(res.code == 1){
						//此处应该要刷新一个列表
						this.showGroup = false
						this.getGroupList()
					}
				})
			},
			addGroup(){
				this.showGroup = true
			},
			delGroup(){
				this.cri = true
				this.submitBtn = false
				this.delBtn = false
			},
			//取消删除
			conealDel(){
				this.cri = false
				this.submitBtn = true
				this.delBtn = true
			},
			//点击选择删除分组
			delArr(id){
				if(this.dalArray.indexOf(id) >= 0){
					this.dalArray.splice(this.dalArray.indexOf(id),1);
				}else{
					this.dalArray.push(id);
				}
				console.log(this.dalArray)
			},
			//确定删除
			comDel(){
				let userinfo = uni.getStorageSync('userinfo');
				this.$api.interfaceApi('delGroup')({
					group:this.dalArray,
					uid:this.usernum
				}).then(res=>{
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					this.getGroupList()
				})
			},
			
			chooseOrder(index){
				this.page = 1
				if(this.order == index){
					this.order = ''
				}else{
					this.order = index
				}
				this.comfimType()
			},
			queryType(index){
				if(this.type == index){
					this.type = ''
				}else{
					this.type = index
				}
			},
			queryType1(index){
				if(this.type == index){
					this.type = 0
				}else{
					this.type = index
				}
				this.comfimType()
			},
			queryIsp(index){
				if(this.isp == index){
					this.isp = 0
				}else{
					this.isp = index
				}
			},
			queryPro(prov){
				if(this.province == prov){
					this.province = ''
				}else{
					this.province = prov
				}
			},
			queryGroup(index){
				if(this.groupId == index){
					this.groupId = 0
				}else{
					this.groupId = index
				}
				this.comfimType()
			},
			updateGroup(gid,name){
				this.updateshow = true
				this.updateName = name
				this.updateId = gid
			},
			
			conealUpdate(){
				this.updateshow = false
			},
			comfimUpdate(){
				this.$api.interfaceApi('updateGroup')({
					gid:this.updateId,
					name:this.updateName
				}).then(res=>{
					this.updateshow = false
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					this.getGroupList()
				})
			},
			
			
			
	    }
	};
</script>

<style lang="less">
	.page{
	
		.head{
			position: fixed;
			top: 0rpx;
			left: 0rpx;
			width: 100%;
			background-color: #008cbc;
			color: #FFFFFF;
			.type{
				float: left;
				width: 25%;
				text-align: center;
				padding: 10rpx 0rpx;
				box-sizing: border-box;
			}
			
			.active{
				border-radius: 10rpx 10rpx 0 0 ;
				background-color: #FFFFFF;
				color: #ff743a;
			}
		}
		
		
		.choose{
			position: fixed;
			top: 60rpx;
			left: 0rpx;
			width: 100%;
			padding: 10rpx 50rpx;
			display: flex;
			justify-content: space-between;
			background-color: #f7f7f7;
			view{
				width: 25%;
				box-sizing: border-box;
			}
			.active{
				border: 2rpx solid #ff743a;
				background-color: #ff743a;
			}
		}
		
		.list{
			margin-top: 130rpx;
			.product-box{
				display: flex;
				justify-content: space-between;
				background-color: #FFFFFF;
				margin-top: 20rpx;
				border-radius: 10rpx;
				
				height: 190rpx;
				
				.product-img{
					width: 100rpx;
					height: 80rpx;
					margin-right: 20rpx;
					margin-top: 20rpx;
				}
				
				.line{
					color: #555555;
					font-size: 24rpx;
					line-height: 57rpx;
					display: flex;
					.line-green{
						width: 25rpx;
						height: 190rpx;
						border-radius: 15rpx 0 0 15rpx;
						background-color: #00bc3c;
			
					}
					.line-glay{
						width: 25rpx;
						height: 190rpx;
						border-radius: 15rpx 0 0 15rpx;
						background-color: #898989;
					}
					.line-red{
						width: 25rpx;
						height: 190rpx;
						border-radius: 15rpx 0 0 15rpx;
						background-color: #ff3131;
					}
				}
				.product-info{
				
					width: 100%;
					padding: 20rpx 10rpx 20rpx 20rpx;
					.info-box{
						width: 55%;
						.title{
							display: flex;
							justify-content: space-between;
							font-size: 34rpx;
							.pencil{
								margin-left: 5rpx;
							}
						}
					}
					
					.img{
						width: 25%;
						margin-right: 20rpx;
						image{
							
							width: 100%;
							height: 100%;
						}
					}
					
					.marny-box1{
						width: 20%;
						text-align: center;
						.content-two{
							font-size: 32rpx;
							margin-top: 20rpx;
							color: #ff0000;
						}
						.number{
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #999999;
						}
					}
					.content{
						display: flex;
						justify-content: space-between;
						margin: 10rpx 0;
						font-size: 24rpx;
						padding-bottom: 20rpx;
						box-sizing: border-box;
						//border-bottom: 2rpx solid #dcdcdc;	
						.line-status{
							margin-top: 10rpx;
							margin-right: 10rpx;
							.line-green{
								width: 30rpx;
								height: 10rpx;
								border-radius: 15rpx;
								background-color: #00bc3c;
							}
							.line-glay{
								width: 30rpx;
								height: 10rpx;
								border-radius: 15rpx;
								background-color: #898989;
							}
							.line-red{
								width: 30rpx;
								height: 10rpx;
								border-radius: 15rpx;
								background-color: #ff3131;
							}
						}
					}
					
					.btn-view{
						display: flex;
						justify-content: space-between;
						font-size: 24rpx;
						color: #008cbc;
						padding: 0rpx 20rpx;
					}
				}
			}
		}
		
		
		.group{
			.one{
				margin: 40rpx auto;
				border-radius: 20rpx;
				width: 100%;
				height: 360rpx;
				background-color: #FFFFFF;
				padding: 20rpx 20rpx 50rpx 20rpx;
				box-sizing: border-box;
				overflow:hidden;
				
				.title{
					display: flex;
					justify-content: space-between;
					.cri{
						width: 30rpx;
						height: 30rpx;
						border-radius:30rpx;
						border: 2rpx solid;
					}
					.active{
						width: 30rpx;
						height: 30rpx;
						border-radius: 30rpx;
						border: 2rpx solid #FFFFFF;
						background-color: #ff0000;
					}
				}
				.content1{
					display: flex;
					margin-top: 20rpx;
					justify-content: space-between;
					font-size: 30rpx;
					view{
						width: 50%;
					}
				}
				.content2{
					display: flex;
					margin-top: 20rpx;
					justify-content: space-between;
					font-size: 30rpx;
					view{
						width: 50%;
					}
				}
				
				.marny-box{
					background-color: #f2f2f2;
					padding: 10rpx 50rpx;
					border-radius: 10rpx;
					display: flex;
					justify-content: space-between;
					margin-top: 20rpx;
					.marny-box-one{
						text-align: center;
					}
				}
			}
			.add-group{
				background-color: #008cbc;
				text-align: center;
				color: #FFFFFF;
				height: 80rpx;
				line-height: 80rpx;
				border-radius: 15rpx;
				margin-top: 20rpx;
			}
			.del-group{
				background-color: #dedede;
				text-align: center;
				height: 80rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				border-radius: 15rpx;
				margin-top: 20rpx;
			}
			.del-btn{
				background-color: #ff0000;
				text-align: center;
				height: 80rpx;
				color: #FFFFFF;
				line-height: 80rpx;
				border-radius: 15rpx;
				margin-top: 20rpx;
			}
		}
			
			
		.modal-group{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 90%;
			height: 350rpx;
			position: absolute;
			top: 35%;
			left: 5%;
			z-index: 100;
			padding: 50rpx;
			box-sizing: border-box;
			.line{
				border: 2rpx solid #dddddd;
			}
			.content{
				margin-top: 20rpx;
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				justify-content: space-between;
				padding: 0 50rpx;
				margin-top: 50rpx;
				text-align: center;
				.coneal-group{
					width: 40%;
					height: 60rpx;
					line-height: 60rpx;
				}
				.submit-group{
					width: 40%;
					background-color: #008cbc;
					border-radius:30rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFFFFF;
				}
			}
		}
			
		.modal-update{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 90%;
			height: 350rpx;
			position: absolute;
			top: 35%;
			left: 5%;
			z-index: 100;
			padding: 50rpx;
			box-sizing: border-box;
			.line{
				border: 2rpx solid #dddddd;
			}
			.title{
				
			}
			.content{
				margin-top: 20rpx;
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				justify-content: space-between;
				padding: 0 50rpx;
				margin-top: 50rpx;
				text-align: center;
				.coneal-group{
					width: 40%;
					height: 60rpx;
					line-height: 60rpx;
				}
				.submit-group{
					width: 40%;
					background-color: #008cbc;
					border-radius:30rpx;
					height: 60rpx;
					line-height: 60rpx;
					color: #FFFFFF;
				}
			}
			
		}
			
		.modal{
			background-color: #FFFFFF;
			border-radius: 15rpx;
			width: 70%;
			height: 260rpx;
			position: absolute;
			top: 35%;
			left: 15%;
			z-index: 100;
			padding: 20rpx;
			box-sizing: border-box;
			.title{
				text-align: center;
				padding: 10rpx 0;
				font-size: 36rpx;
				box-sizing: border-box;
			}
			.content{
				height: 70rpx;
				background-color: #f5f5f5;
				input{
					height: 70rpx;
					line-height: 70rpx;
					padding: 0 10rpx;
					box-sizing: border-box; 
				}
			}
			.btn-group{
				display: flex;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					width: 50%;
					text-align: center;
				}
				.submit{
					color: #008cbc; 
					width: 50%;
					text-align: center;
				}
			}
		}
		
		.box{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 99;
		}
		
		.boxType{
			position: fixed;
			top: 14%;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 99;
		}
		
		.boxGroup{
			position: fixed;
			top: 15%;
			left: 0;
			width: 100%;
			height: 100%;
			background-color:#000000;
			opacity: 0.5;
			z-index: 99;
		}
		
		.modal-type{
			background-color: #FFFFFF;
			width: 100%;
			height: 600rpx;
			position: fixed;
			top: 126rpx;
			left: 0%;
			z-index: 100;
			padding: 20rpx;
			box-sizing: border-box;
			
			.choose-type{
				padding: 10rpx 50rpx;
				box-sizing: border-box;
				.content{
					
					view{
						display: inline-block;
						margin-left: 40rpx;
						//margin-right: 20rpx;
						margin-top: 10rpx;
						text-align: center;
						border-radius: 10rpx;
						width: 15%;
						height: 50rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 49rpx;
						background-color: #f3f3f3;
					}
					
					.active{
						color: #FFFFFF;
						background-color: #008cbc;
					}
				}
				.content1{
					
					view{
						display: inline-block;
						margin-left: 40rpx;
						//margin-right: 20rpx;
						margin-top: 10rpx;
						text-align: center;
						border-radius: 10rpx;
						width: 30%;
						height: 60rpx;
						font-size: 24rpx;
						color: #999999;
						line-height: 59rpx;
						background-color: #f3f3f3;
					}
					
					.active{
						color: #FFFFFF;
						background-color: #008cbc;
					}
				}
			}
			.all{
				padding:100rpx 50rpx;
				font-size: 32rpx;
				box-sizing: border-box;
				.title{
					padding: 20rpx 0;
				}
				.active{
					color:#FFFFFF;
					background-color: #008cbc;
					padding: 20rpx 0;
				}
				.line{
					border: 2rpx solid #dddddd;
					background-color: #dddddd;
				}
			}
			.btn-group{
				display: flex;
				padding: 0 20rpx;
				justify-content: space-between;
				height: 80rpx;
				line-height: 80rpx;
				margin-top: 10rpx;
				.coneal{
					background-color: #e1e1e1;
					border-radius: 15rpx;
					width: 40%;
					text-align: center;
				}
				.submit{
					background-color: #008cbc;
					color: #FFFFFF;
					border-radius: 15rpx;
					width: 40%;
					text-align: center;
				}
			}
		}
		
		
		
		
		
		
	}
</style>
